<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card">
    <div class="card-header">
        <i class="fa fa-list text-danger"></i> 
        <span i18n>Interval List</span>
    </div>
    <div class="card-body p-0 position-relative">
        <div *ngIf="toolbars" class="bg-light px-2 py-2">
            <div class="btn-group btn-group-sm" role="group">
                <button class="btn btn-primary" (click)="refresh()">
                    <span>
                        <i class="fa fa-refresh mr-1"></i>
                        <span i18n>Refresh</span>
                    </span> 
                </button>
                <button type="button" class="btn btn-info"  routerLink="../add-interval">
                    <span>
                        <i class="fa fa-plus mr-1"></i>
                        <span i18n>Add</span> 
                    </span>
                </button>
                <button type="button" class="btn btn-success" (click)="edit()" [disabled]="intervalSelected.length !== 1">
                    <span>
                        <i class="fa fa-edit mr-1"></i>
                        <span i18n>Edit</span>
                    </span>
                </button>
                <button type="button" class="btn btn-danger" (click)="deleteConfirm()" [disabled]="intervalSelected.length === 0">
                    <span>
                        <i class="fa fa-trash mr-1"></i>
                        <span i18n>Delete</span>
                    </span>
                </button>
              </div>
        </div>
        <div class="table-responsive ">
            <table class="table table-hover text-truncate ">
                <thead class="thead-light">
                    <tr>
                      <th scope="col"><input *ngIf="enableSelectAll" type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                      <th scope="col" i18n>ID</th>
                      <th scope="col" i18n>Name</th>
                      <th scope="col" i18n>Start</th>
                      <th scope="col" i18n>End</th>
                      <th scope="col" i18n>Interval</th>
                      <th scope="col" i18n>RunOnce</th>
                      <!-- <th scope="col">AssociatedActions</th> -->
                      <!-- <th scope="col">Created</th>
                      <th scope="col">Modified</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let interval of intervalList" [class.table-active]="isChecked(interval.name)">
                        <td> <input type="checkbox" role="button"  [checked]="isChecked(interval.name)" (click)="selectOne($event,interval)"></td>
                        <td class="user-select-all">{{interval.id}}</td>
                        <td class="user-select-all">{{interval.name}}</td>
                        <td>{{interval.start}}</td>
                        <td>{{interval.end}}</td>
                        <td>{{interval.interval}}</td>
                        <td>{{interval.runOnce?true:false}}</td>
                        <!-- <td class="text-center">
                            <a routerLink="../../interval-action-center" [queryParams]="{'intervalName':interval.name}">
                                <i class="fa fa-share-alt-square fa-lg"></i>
                            </a>
                        </td> -->
                        <!-- <td>{{interval.created | date:'yyyy-MM-dd hh:mm:ss'}}</td>
                        <td>{{interval.modified | date:'yyyy-MM-dd hh:mm:ss' }}</td> -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer text-muted p-1">
        <nav aria-label="navigation">
            <ul class="pagination justify-content-end m-0">
                <li class="page-item mr-2 mt-1">
                    <span class="align-middle" i18n>items per page</span>
                </li>
                <li class="page-item mr-2 ">
                    <select class="custom-select" name="pageLimit" id="pageLimit" [(ngModel)]="pageLimit" (ngModelChange)="onPageSelected()">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
                    </select>
                </li>
                <li class="page-item mr-1">
                    <button class="page-link btn" (click)="prePage()" [disabled]="pagination === 1">
                        <i class="fa fa-angle-double-left mr-1"></i>
                        <span i18n>Previous</span>
                    </button>
                </li>
                <li class="page-item" >
                    <button class="page-link btn" (click)="nextPage()" [disabled]="this.pageLimit > intervalList.length">
                        <span i18n>Next</span>
                        <i class="fa fa-angle-double-right ml-1"></i>
                    </button>
                </li>
            </ul>
        </nav>
    </div>
</div>

<div class="modal fade" id="deleteConfirmDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirmDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteConfirmDialogLabel">
                    <i class="fa fa-warning mr-1"></i>
                    <span i18n>Warning</span>
                </h5>  
            </div>
            <div class="modal-body" i18n>
                Associated actions will also be deleted and the data will be permanently erased!!! Are you sure to execute delete operation？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" i18n>Cancel</button>
                <button type="button" class="btn btn-danger" (click)="deleteIntervals()" i18n>Confirm</button>
            </div>
        </div>
    </div>
</div>
    
    